<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
		<!-- 页面內容 -->
			<view style="width: 750rpx;height: 450rpx;background:rgba(255,255l,255,1)">
				<view class="grace-columns" style="position: absolute;top: 330rpx;left: 32rpx;">
					<text style="font-size:44rpx;font-weight:bold;color:rgba(218,28,30,1);">￥{{ selling_price }}</text>
					<text style="font-size:24rpx;font-weight:bold;text-decoration:line-through;color:rgba(204,204,204,1);">原价{{price_s}}</text>
				</view>
				<image :src="banners" style="position: absolute;top: 23rpx;left: 173rpx; width: 400rpx;height: 400rpx;"></image>
				
			</view>
		
			<view @tap="get_pay_type(0)" class="grace-flex grace-flex-vcenter" style="margin-top: 30rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows">
					<image src="../../static/rise_vip_weixin.png" style="margin-left: 31rpx; width: 70rpx;height: 70rpx;"></image>
					<text style="margin-left: 31rpx; font-size:26rpx;font-weight:400;color:rgba(42,42,42,1);line-height:30px;">微信支付</text>
					<image :src="pay_tape===0?'../../static/rise_vip_xuanzhong.png':'../../static/rise_vip_weixuanzhong.png'" style="position: relative; top: 17rpx;left: 400rpx; width: 32rpx;height: 32rpx;"></image>
				</view>
			</view>
			<view v-show="is_wx" @tap="get_pay_type(1)" class="grace-flex grace-flex-vcenter" style="margin-top: 5rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows">
					<image src="../../static/rise_vip_zhifubao.png" style="margin-left: 31rpx; width: 70rpx;height: 70rpx;"></image>
					<text style="margin-left: 31rpx; font-size:26rpx;font-weight:400;color:rgba(42,42,42,1);line-height:30px;">支付宝支付</text>
					<image :src="pay_tape===1?'../../static/rise_vip_xuanzhong.png':'../../static/rise_vip_weixuanzhong.png'" style="position: relative; top: 17rpx;left: 375rpx; width: 32rpx;height: 32rpx;"></image>
				</view>
			</view>
			<view @tap="get_pay_type(2)" class="grace-flex grace-flex-vcenter" style="position: relative; margin-top: 5rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows">
					<image src="../../static/jinbi.png" style="margin-left: 31rpx; width: 70rpx;height: 70rpx;"></image>
					<text style="margin-left: 31rpx; font-size:26rpx;font-weight:400;color:rgba(42,42,42,1);line-height:30px;">金币支付</text>
					<text style="position: absolute;left: 260rpx;line-height: 60rpx; font-size:22rpx;font-weight:400;color:rgba(153,153,153,1);">剩余金币：{{ yue }}</text>
					<image :src="pay_tape===2?'../../static/rise_vip_xuanzhong.png':'../../static/rise_vip_weixuanzhong.png'" style="position: relative; top: 17rpx;left: 400rpx; width: 32rpx;height: 32rpx;"></image>
				</view>
			</view>
			<button @tap="up_vip()" style="width:687rpx;height:90rpx;background:rgba(218,28,30,1);border-radius:6rpx;font-size:32rpx;font-weight:400;color:rgba(255,255,255,1);margin-top: 250rpx;line-height: 90rpx;">立即购买</button>
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				pay_tape:0,
				id:'',
				selling_price: "0",//实际售价
				price_s: 0,//原价
				banners:'',//显示的图片
				yue: "0",//客户余额
				is_wx:true,
				
			}
		},
		onLoad:function(opt){
			this.id=opt.id;
			this.get_info_data();
			// #ifdef H5
			var ua = navigator.userAgent.toLowerCase();
			// alert(ua)  
			if (ua.search(/MicroMessenger/i) > -1) {  
				this.is_wx=false;
			} else if (ua.search(/mqqbrowser/i) > -1) {  
				this.is_wx=true;
			} else {  
				this.is_wx=true;
			}
			// #endif
			
		},
		methods:{
			get_info_data(){
				var vm=this;
				vm.req.post(
				vm.lochost+'/mytrunk/discounts/getgoumai',
				{id:vm.id},
				{},
				function(res){
					vm.yue=res.data.yue;
					vm.banners=res.data.quaninfo.banners;
					vm.price_s=res.data.quaninfo.price_s;
					vm.selling_price=res.data.quaninfo.selling_price;
				}
				)
			},
			huoqu_list(){
				var vm=this;
				var type='';
				if(this.pay_tape===0){
					type='微信';
				}else if(this.pay_tape===1){
					type='支付宝';
				}else if(this.pay_tape===2){
					type='金币';
				}
			},
			get_pay_type(type){
				this.pay_tape=type;
				this.huoqu_list();
			},
			up_vip(){
				var vm=this;
				var type='';
				if(this.pay_tape===0){
					type='微信';
				}else if(this.pay_tape===1){
					type='支付宝';
				}else if(this.pay_tape===2){
					type='金币';
				}
				vm.req.post(
				vm.lochost+'/mytrunk/mypayment/purchase_quan',
				{id:vm.id,type:type},
				{},
				function(res){
					console.log(res);
					if(vm.pay_tape===2){
						vm.get_info_data();
						vm.msg_show(res.msg);
						
					}
					else{
						// #ifdef APP-PLUS
							var provider = '';
							if(type==='微信'){
								provider='wxpay';
							}else if(type==='支付宝'){
								provider='alipay';
							}
							// 支付数据
							uni.requestPayment({
								provider: provider, // wxpay、alipay
								orderInfo:res.data, //微信、支付宝订单数据
								success: function (res) {
									vm.msg_show('购买成功');
									console.log('success:' + JSON.stringify(res));
								},
								fail: function (err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						// #endif
						
						// #ifdef H5
						// var jweixin = require('https://res2.wx.qq.com/open/js/jweixin-1.4.0.js')
						
							if(type==='微信'){
								function onBridgeReady(){
								   WeixinJSBridge.invoke(
								      'getBrandWCPayRequest', res.data,
								      function(res){
								      
								      if(res.err_msg == "get_brand_wcpay_request:ok" ){
										  vm.msg_show('购买成功');
								      	// window.location.href="https://xs.scthzy.com/user/index/index.html";
								      // 使用以上方式判断前端返回,微信团队郑重提示：
								            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
								      } 
								   }); 
								}
								if (typeof WeixinJSBridge == "undefined"){
								   if( document.addEventListener ){
								       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
								   }else if (document.attachEvent){
								       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
								       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
								   }
								}else{
								   onBridgeReady();
								}
								
								    // wx.config({$payconfig});
								    wx.ready(function () {
								        wx.chooseWXPay(res.data);
								    });
								    wx.error(function (res) {
								        alert(res)
								    });
								
								
								
							}else if(type==='支付宝'){
								    const form = res.data;
								    // deleteExisting('#alipay'); // 判断之前是否插入过#alipay
								    const div = document.createElement('div');
								    div.id = 'alipay';
								    div.innerHTML = form;
								    document.body.appendChild(div);
								    document.querySelector('#alipay').children[0].submit(); // 执行后会唤起支付宝
								
							}
							
						// #endif
						
					}

					
				}
				)
			},
			
		
		},
		components:{
			gracePage
		}
	}
</script>

<style>
</style>


<!-- .grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放 -->
